<template>
  <view class="container">
    <navigationBar title="">
      <!-- <template #right>
        <image class="share-img" src="../../static/shopDetails/share.svg" />
      </template> -->
    </navigationBar>
    

    <view class="card-layout" style="border-radius: 8rpx 8rpx 0 0">
      <!-- <view class="title">详情介绍</view> -->
      <swiper class="swiper" @change="swiperChange">
        <block v-for="item in dataInfo.goods.bannerJSON" :key="item">
          <swiper-item>
            <image class="swiper-img" :src="item.name" mode="aspectFill"></image>
          </swiper-item>
        </block>
      </swiper>

      <!-- ar试戴 -->
      <view class="ar-layout">
				<view class="ar-con">
					<view>
						<image src="../../static/shopDetails/3D.svg" mode="aspectFill"></image>
						<text>3D空间</text>
					</view>
					<view>
						<image src="../../static/shopDetails/AR.svg" mode="aspectFill"></image>
						<text>AR试戴</text>
					</view>
				</view>
				<view class="swiper-num">{{bannerCurrent}}/{{dataInfo.goods.bannerJSON?.length}}</view>
			</view>

      <view class="price-layout">
        <view class="money">
          <view class="money-title">¥{{functions.formatToUSD(dataInfo.goods.salePrice)}}</view>
        </view>
        <view class="price-right"> <view class="num">{{dataInfo.goods.collectNum}}</view>人想要 </view>
      </view>
      <!-- <view class="title2">
            <view>品牌</view>
            <view class="label" >454</view>
            <image src="../../static/shopDetails/3D.svg"></image>
        </view> -->
      <view class="label-text-layout">
        <view class="self-support" v-if="dataInfo.merchant.isSelf == 1">自营</view>
				<view class="new-product" @click="finenessPopupRef.open()">{{dataInfo.goods.fineness}}</view>
				{{dataInfo.goods.name}}
      </view>

      <!-- 领券 -->
      <!-- <view class="label-layout" wx:if="{{claimCouponsList.length > 0}}" bindtap="handleCoupon(true)">
            <view class="label-left">
                <view wx:for="{{claimCouponsList}}" wx:key="id">
                    <view class="label" wx:if="{{item.status != 1}}">{{item.typeName}} | {{item.label}}</view>
                </view>
            </view>
            <view class="label-right">
                <view>领券</view>
                <image src="../../static/img/right_icon2.svg"></image>
            </view>
        </view> -->
    </view>

		<!-- 参数 -->
    <view class="card-item-layout">
      <view
        class="card-item"
        v-for="(item, index) in dataInfo.goods.parametersJSON"
        :key="index"
      >
        <view class="item-val">{{ item.value }}</view>
        <view>{{ item.title }}</view>
        <view class="line" v-if="index !== 0"></view>
      </view>
      <view class="right-item" @click="parameterPopupRef.open()">
        <image src="../../static/shopDetails/right.svg"></image>
      </view>
    </view>

		<!-- 同款对比 -->
    <view class="top-layout" v-if="dataInfo.sameList?.length > 0">
      <view class="top-item">
        <view>同款对比</view>
        <view class="top-item-right" @click="toSameModel">
          <view>{{dataInfo.sameList.length}}款</view>
          <image src="../../static/right.svg"></image>
        </view>
      </view>

      <scroll-view
        type="list"
        scroll-x="true"
        class="scroll-x"
        scroll-into-view="item1"
        scroll-with-animation
      >
        <view class="scroll-x-layout">
          <view
            v-for="(item, index) in dataInfo.sameList"
            :key="item.id"
            :id="'item' + index"
            :class="[
              sameCurrentIndex === index
                ? 'card-item current-card-item'
                : 'card-item',
            ]"
          >
            <view
              :class="[
                sameCurrentIndex == index
                  ? 'goodsImg current-goodsImg'
                  : 'goodsImg',
              ]"
            >
              <image :src="item.coverPic" mode="aspectFill"></image>
              <view
                :class="[
                  sameCurrentIndex == index ? 'label current-label' : 'label',
                ]"
                >{{ item.goodsFineness }}</view
              >
            </view>
            <view
              :class="[
                sameCurrentIndex == index ? 'money current-money' : 'money',
              ]"
              >¥{{ functions.formatToUSD(item.salePrice) }}</view
            >
            <view
              :class="[
                sameCurrentIndex == index ? 'bottom current-bottom' : 'bottom',
              ]"
            >
              <image :src="item.merchantCoverPic" mode="aspectFill"></image>
              <view
                :class="[
                  sameCurrentIndex == index
                    ? 'nikeName current-nikeName'
                    : 'nikeName',
                ]"
                >{{ item.merchantName }}</view
              >
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- <view class="card-layout">
        <view class="title3">买后必验服务流程</view>

        <view class="process-layout" wx:for="{{processList}}" wx:for-index="index" wx:key="id">
            <view class="process-left">
                <image class="drop" src="../../static/img/drop.svg"></image>
                <view class="line" wx:if="{{processList.length != index + 1}}"></view>
            </view>
            <view class="process-right">
                <view class="process-title">
                    <view>{{item.title}}</view>
                    <view class="label" wx:if="{{item.label}}">{{item.label}}</view>
                </view>
                <text>{{item.content}}</text>
            </view>
        </view>

        <view class="item-card" bindtap="handleGuarantee(true)">
            <text>{{dataInfo.rightsName}}</text>
            <view class="right-img">
                <image src="../../static/img/arrow.svg"></image>
            </view>
        </view>
    </view> -->

		<!-- 最近购买 -->
    <view class="card-layout no-padding" v-if="dataInfo.purchases?.length > 0">
      <view class="title5">
        <view>最近购买</view>
        <view class="right" @click="toRecent">
          <view>查看更多</view>
          <image src="../../static/right.svg"></image>
        </view>
      </view>

      <view class="goods-item">
        <view class="goods-item-img">
          <image :src="dataInfo.goods.baseCover"></image>
        </view>
        <view class="goods-text">{{ dataInfo.goods.name }}</view>
      </view>

      <view class="buy-item" v-for="item in dataInfo.purchases" :key="item">
        <view class="item">
          <image
            class="portrait"
            :src="item.userAvatarUrl"
            mode="aspectFill"
          ></image>
          <view class="nikeName">{{ item.userNickName }}</view>
        </view>
        <view class="item">{{ item.fineness }}</view>
        <view class="item">¥{{ functions.formatToUSD(item.buyPrice) }}</view>
        <view class="item">{{ item.buyDate }}</view>
      </view>
    </view>

		<!-- 店铺信息 -->
    <view class="card-layout no-padding">
      <view class="title4">
        <view class="title4-left" @click="storePopupRef.open()">
          <image
            class="portrait"
            :src="dataInfo.merchant.coverPic"
            mode="aspectFill"
          ></image>
          <view>{{ dataInfo.merchant.name }}</view>
          <view
            class="label-items"
            style="margin-left: 20rpx"
            v-if="dataInfo.merchant.isSelf == 1"
            >自营</view
          >
        </view>
      </view>

      <view class="label-item-layout">
        <view class="label-item">
          <view>在售</view>
          <text>{{ dataInfo.merchant.goodsTotal || 0 }}</text>
        </view>
        <view class="label-item-line"></view>
        <view class="label-item">
          <view>已售</view>
          <text>{{ dataInfo.merchant.saleNum || 0 }}</text>
        </view>
      </view>

      <view class="title5">商品描述</view>
      <view
        class="describe-text"
        :class="[moerJudge ? 'text-overflow-many' : '']"
      >
        {{ dataInfo.goods.content }}
      </view>
      <view class="moer" v-if="dataInfo.goods.content?.length > 140">
        <image src="../../static/down.svg" v-if="moerJudge" @click="changeMore"></image>
        <image src="../../static/down.svg" v-else @click="changeMore"></image>
      </view>

      <view
        class="title5 title5-margin"
        v-if="dataInfo.goods.captureImgJSON?.length > 0">商品实拍图</view>

      <view
        class="goodsImgList-layout"
        v-if="dataInfo.goods.captureImgJSON?.length > 0">
        <image
          class="goodsImg-item"
          v-for="item in dataInfo.goods.captureImgJSON"
          :key="item"
          :src="item"
        />
      </view>
    </view>

		<!-- 品牌信息 -->
    <view class="card-layout no-padding">
      <view class="title5">
        <view>{{ dataInfo.brandData.name }}</view>
        <view class="right">
          <view class="but" @click="toBrandFest">去逛逛</view>
        </view>
      </view>
      <view class="label-item-layout">
        <view class="label-item">
          <view>共有</view>
          <text style="margin-right: 10rpx">{{
            dataInfo.brandData.goodsNum || 0
          }}</text>
          <view>款商品在售</view>
        </view>
      </view>

      <scroll-view
        type="list"
        scroll-x="true"
        class="scroll-x"
        scroll-with-animation
      >
        <view class="goods-card-layout">
          <view
            class="goods-card"
            v-for="item in dataInfo.brandData.goodsList"
            :key="item.id"
          >
            <view class="goods-card-img">
              <image :src="item.coverPic" mode="aspectFill"></image>
            </view>
            <view class="goods-money">¥{{ functions.formatToUSD(item.salePrice) }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

		<!-- 常见问题 -->
    <view class="card-layout no-padding">
      <view class="title5">常见问题</view>
      <view v-for="(item, index) in dataInfo.questions" :key="item">
        <view class="problem-title">{{ index + 1 }}、{{ item.title }}</view>
        <view class="problem-text" v-html="item.content"></view>
        <!-- <view class="problem-text">{{item.content}}</view> -->
      </view>
    </view>

    <view class="bottom-layout">
      <view class="bottom-left">
        <view class="bottom-item">
          <image src="../../static/shopDetails/consult.svg"></image>
          <view>咨询</view>
        </view>
        <view class="bottom-item">
          <image src="../../static/shopDetails/share.svg"></image>
          <view>分享</view>
          <button class="button-share" open-type="share"></button>
        </view>
        <view class="bottom-item">
          <!-- <image src="../../static/shopDetails/like.svg"></image> -->
          <image src="../../static/shopDetails/likes.svg"></image>
          <view>想要</view>
        </view>
      </view>
      <view class="bottom-but" v-if="dataInfo.goods.isSale == 0">
        <view>¥{{ functions.formatToUSD(dataInfo.goods.salePrice) }}</view>
        <view>立即购买</view>
      </view>
      <view class="bottom-but bottom-but-no" v-else>
        <view>¥{{ functions.formatToUSD(dataInfo.goods.salePrice) }}</view>
        <view>已售完</view>
      </view>
    </view>
  </view>

	<!-- 商品参数弹窗 -->
  <popup ref="parameterPopupRef" title="商品参数">
		<view class="dialog-content">
			<view class="block-item" v-for="item in dataInfo.goods.parametersJSON" :key="item.id">
          <view class="title">{{item.title}}</view>
          <view class="content">{{item.value}}</view>
        </view>
        <view class="tips-text">
            请以具体实物为准，商品信息仅供参考
      </view>
		</view>
	</popup>

	<!-- 成色弹窗 -->
	<popup ref="finenessPopupRef" title="成色评级标准">
		<view class="dialog-content">
        <view class="item-card" v-for="item in dataInfo.finenessList" :key="item.id">
            <view class="left">
                <view class="fineness">{{item.content}}</view>
                <view class="line"></view>
                <view class="description">{{item.description}}</view>
            </view>
            <view class="right">{{item.detail}}</view>
        </view>

        <view class="tips-text">
            成色平级仅供参考，不直接影响商品价格。配件是否齐全不作为平均标准，配件详情以拍摄展示为准；瑕疵描述仅为店铺评判标准，具体详情请参照实物图片
        </view>
    </view>
	</popup>

	<!-- 店铺保障弹窗 -->
  <popup ref="storePopupRef" title="店铺保障">
    <view class="dialog-content">
        <view class="text-item" v-for="item in dataInfo.rights" :key="item.id">
            <view class="title">{{item.title}}</view>
            <view class="content">{{item.content}}</view>
        </view>
    </view>
  </popup>

	<!-- 领券弹窗  暂时不要-->
  <!-- <popup ref="ticketPopupRef" title="领券">
    <view class="dialog-content">
        <view class="coupon-card-layout" v-for="item in dataInfo.couponsList" :key="item.id">
            <view class="coupon-top">
                <view class="left">
                    <view class="money">{{item.amountName}}</view>
                    <view class="coupon-name">{{item.name}}</view>
                </view>
                <view :class="[item.status != 1?'but':'but disable']" >{{item.status != 1?'领取':'已领取'}}</view>
            </view>
            <view class="label">{{item.typeName}} | {{item.label}}</view>
            <view class="text">可在小程序端、APP端使用</view>
            <view class="time" v-if="item.validType == 1">自领取之日起 {{item.validDay}}天内有效</view>
            <view class="time" v-else>{{item.startTime}}-{{item.endTime}}</view>
        </view>
    </view>
  </popup> -->
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import {onLoad,onShow} from "@dcloudio/uni-app";
import { goodsDetails,goodsFineness,goodsPurchase,goodsSame } from '@/api/shop.js'
import functions from '../../utils/functions'

//商品id
const goodsId = ref(0)
// 选择的同款对比
const sameCurrentIndex = ref(0);
//是否展开
const moerJudge = ref(false);
//banner 下标
const bannerCurrent = ref(1);

//商品参数弹窗
const parameterPopupRef = ref(null)
//成色参数弹窗
const finenessPopupRef = ref(null)
//店铺保障弹框
const storePopupRef = ref(null)
//领券弹框
const ticketPopupRef = ref(null)


const dataInfo = reactive({
	//商家信息
  merchant: {},
  //商品
  goods: {},
  //最近购买
  purchases: [],
  //问题
	questions: [],
	//品牌馆
	brandData: {},
	//店铺保障
	rights:[],
	//成色列表
	finenessList:[],
  //同款对比
  sameList: [],
	
	//领券
	couponsList:[
		{
			id:1,
			amountName:'￥50',
			name:'新客满499减50元通用卷',
			status:1,
			typeName:'全品类',
			label:'满50可用',
			validType:1,
			validDay:5,
			startTime:'2023.08.14 15:40',
			endTime:'2023.09.14 15:45'
		}
	]
});

onLoad(({id}) => {
	// console.log('id',id)
	goodsId.value = Number(id)
	
})

onMounted(() => {
	getGoodsIdDetails()
	getGoodsFineness()
	// getGoodsPurchase()
	// getGoodsSame()
});

const changeMore = () => {
	moerJudge.value = !moerJudge.value
}

const swiperChange = (event) => {
	// console.log('e',event)
	bannerCurrent.value = event.detail.current + 1;
}

const toRecent = () => {
	uni.navigateTo({
		url: '/pages/recentPurchases/index?id=' + goodsId.value
	});
}

const toSameModel = () => {
  uni.navigateTo({
		url: '/pages/sameModelGoods/index?id=' + dataInfo.goods.baseId
	});
}

const getGoodsIdDetails = async () => {
	let res = await goodsDetails({id:goodsId.value,inType:1})
	// console.log('商品详情res',res)
	dataInfo.brandData = res.brandData
	dataInfo.questions = res.questions
	dataInfo.purchases = res.purchases
	dataInfo.merchant = res.merchant
	dataInfo.goods = res.goods
	dataInfo.rights = res.rights
	if (res.goods.content.length > 140) {
		moerJudge.value = true
	}
  getGoodsSame({id:res.goods.id,inType:1})
}

const getGoodsFineness = async () => {
	let res = await goodsFineness()
	// console.log('商品成色列表',res)
	dataInfo.finenessList = res
}

// const getGoodsPurchase = async () => {
// 	let res = await goodsPurchase({goodsId:goodsId.value})
// 	console.log('这个商品的最近购买',res)
// 	dataInfo.purchases = res.list
// }

const getGoodsSame = async (datas) => {
	let res = await goodsSame(datas)
	// console.log('同款对比',res)
	dataInfo.sameList = res.list.map(item => {
    let imgArr = item.coverPicJSON.filter(item2 => item2.type === 'image')
    return {...item,coverPic:imgArr[0].name}
  })
}

const toBrandFest = () => {
  uni.navigateTo({
    url: '/pages/brandFest/index?id=' + dataInfo.brandData.id
  })
}

</script>

<style lang='scss' scoped>
.container {
  // background-color: #f5f5f5;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  // box-sizing: border-box;
  // overflow-x: hidden;
  // width: 100vw;
  // height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  box-sizing: border-box;
  // position: relative;
}

.share-img {
  width: 48rpx;
  height: 48rpx;
}

.ar-layout{
	width: 750rpx;
	height: 90rpx;
	background: linear-gradient( 180deg, rgb(255, 255, 255) 0%, #F4F3F7 50%);
	padding-top: 24rpx;
	box-sizing: border-box;
	margin-bottom: 16rpx;
	position: relative;

	.ar-con{
		width: 320rpx;
		margin: auto;
		@include flex(row,space-between,flex-start);

		>view{
			width: 148rpx;
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			@include flex();

			>image{
				width: 38rpx;
				height: 38rpx;
				margin-right: 8rpx;
			}
			>text{
				font-weight: 400;
				font-size: 22rpx;
				color: #333333;
			}
		}
	}

	.swiper-num{
		width: 66rpx;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #AAAAAA;
		position: absolute;
		right: 38rpx;
		top: -36rpx;
		line-height: 36rpx;
		text-align: center;
	}
}

.top-layout {
  @include wh(710rpx);
  margin-bottom: 20rpx;
  background: white;
  margin: auto;
  padding: 30rpx 24rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  .top-item {
    @include flexs(center, space-between);
    @include fonts(32rpx, #000000, bold);
    padding-bottom: 20rpx;
    .top-item-right {
      @include flexs(center, flex-end);
      @include fonts(28rpx, #222222);
      image {
        @include wh(20rpx, 20rpx);
        margin-left: 10rpx;
      }
    }
  }

  .scroll-x {
    @include wh(100%);

    .scroll-x-layout {
      @include wh(100%);
      @include flexs(flex-start, flex-start);
      .card-item {
        @include wh(200rpx);
        padding: 16rpx 16rpx 12rpx 16rpx;
        box-sizing: border-box;
        background: linear-gradient(180deg, #f4f4f4 0%, #ffffff 100%);
        border-radius: 8rpx;
        margin-right: 24rpx;
        .goodsImg {
          @include wh(168rpx, 168rpx);
          position: relative;
          image {
            @include wh(100%, 100%);
            border-radius: 4rpx;
          }
          .label {
            @include fonts(22rpx, #fe475b, bold);
            padding: 2rpx 8rpx;
            box-sizing: border-box;
            background: #f5f5f5;

            position: absolute;
            bottom: 0;
            left: 0;
          }
        }

        .money {
          @include fonts(22rpx, #222222, bold);
          margin: 12rpx 0 5rpx 0;
        }
        .bottom {
          @include flexs(center, flex-start);
          image {
            @include wh(32rpx, 32rpx);
            margin-right: 8rpx;
            border-radius: 50%;
          }
          .nikeName {
            @include wh(calc(100% - 40rpx));
            @include fonts(24rpx, #636569);
            @extend %text-overflow;
          }
        }
      }

      .current-card-item {
        // @include wh(200rpx);
        background: linear-gradient(
          180deg,
          #16dff2 0%,
          rgba(255, 255, 255, 0) 100%
        );

        // .current-goodsImg{
        //     @include wh(168rpx,168rpx);
        //     .current-label{
        //         padding: 4rpx 16rpx;
        //         box-sizing: border-box;
        //     }
        // }

        // .current-money{
        //     @include fonts(28rpx,#222222,bold);
        // }

        // .current-bottom{
        //     image{
        //         @include wh(40rpx,40rpx);
        //     }
        //     .current-nikeName{
        //         @include wh(calc(100% - 48rpx));
        //         @include fonts(24rpx,#636569);
        //     }
        // }
      }
    }
  }
}

.card-layout {
  @include wh(100%);
  // background: #FFFFFF;
  // padding: 0 24rpx;
  // box-sizing: border-box;
  padding-top: calc(var(--status-bar-height) + 90rpx);
	border-radius: 8rpx;
  .title {
    @include fonts(28rpx, #000000);
    margin-bottom: 32rpx;
  }
  .swiper {
    @include wh(100%, 480rpx);
		position: relative;

    .swiper-img {
      @include wh(100%, 480rpx);
      border-radius: 4rpx;
    }

		
  }

  .swiper .wx-swiper-dot {
    @include wh(36rpx, 8rpx);
    border-radius: 0rpx;
    background: rgba(255, 255, 255, 0.5);
  }

  .swiper .wx-swiper-dot-active {
    border-radius: 0rpx;
    background: #ffffff;
  }

  .price-layout {
    @include flexs(center, space-between);
    background-color: white;
    width: 710rpx;
    margin: auto;
    padding: 44rpx 24rpx 20rpx 24rpx;
    box-sizing: border-box;
    border-radius: 8rpx 8rpx 0 0;
    .money {
      @include flexs(flex-end, flex-start);
      @include fonts(36rpx, #111111, bold);

      .money-title{
        @include fonts(36rpx, #111111, bold);
      }

      text {
        @include fonts(24rpx, #939395);
        text-decoration: line-through;
        margin-left: 12rpx;
      }
    }
    .price-right {
      @include flexs(flex-end, flex-end);
      @include fonts(24rpx, #b7b7b7);
      // .num{
      //     @include fonts(24rpx,#222222,bold);
      //     margin-right: 10rpx;
      // }
    }
  }

  .label-layout {
    @include wh(100%, 84rpx);
    @include flexs(center, space-between);
    margin-bottom: 24rpx;
    position: relative;
    .label-left {
      @include wh(calc(100% - 56rpx));
      @include flexs(center, flex-start);
      overflow: hidden;
      .label {
        @include fonts(28rpx, #ff2d52);
        margin-right: 20rpx;
        padding: 12rpx 20rpx;
        box-sizing: border-box;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #ff2d52;
        white-space: nowrap;
      }
    }

    .label-right {
      @include wh(268rpx, 84rpx);
      @include flexs(center, flex-end);
      @include fonts(28rpx, #ff2d52, bold);
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(
        267deg,
        #ffffff 40%,
        rgba(255, 255, 255, 0) 100%
      );
      image {
        @include wh(32rpx, 32rpx);
        margin-left: 8rpx;
      }
    }
  }

  .title2 {
    @include flexs(center, flex-start);
    @include fonts(32rpx, #222222, bold);
    background-color: white;
    width: 710rpx;
    margin: auto;
    .label {
      @include fonts(22rpx, #967e4f, bold);
      padding: 2rpx 8rpx;
      box-sizing: border-box;
      margin: 0 12rpx;
      background: #f4f2ed;
    }
    image {
      @include wh(28rpx, 28rpx);
    }
  }
  .label-text-layout {
    width: 710rpx;
    margin: auto;
    padding: 0 24rpx 24rpx 24rpx;
    box-sizing: border-box;
    background-color: white;
    line-height: 50rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 18rpx;
		border-radius: 0 0 8rpx 8rpx;
		// vertical-align: middle;
		// @include flex(row,flex-start,flex-start);
		

    .self-support {
			width: 64rpx;
			height: 30rpx;
			background: #E6CB98;
			border-radius: 2rpx;
      font-weight: 500;
      font-size: 22rpx;
      color: #5f3308;
      margin-right: 12rpx;
			@include flex();
			float: left;
			margin-top: 10rpx;
			// display: inline-block;
      // vertical-align: middle;
    }
    .new-product {
			width: 64rpx;
			height: 30rpx;
      font-weight: 500;
      font-size: 22rpx;
      color: #ffffff;
      background: #fe475b;
      border-radius: 2rpx;
      margin-right: 16rpx;
			@include flex();
			float: left;
			margin-top: 10rpx;
			// display: inline-block;
      // vertical-align: middle;
    }
  }

  .label-items {
    width: 64rpx;
    height: 30rpx;
    background: #e6cb98;
    border-radius: 2rpx;
    @include flexs(center, center);
    @include fonts(22rpx, #5f3308);
    margin-right: 12rpx;
  }

  .title3 {
    @include fonts(28rpx, #967e4f, bold);
    margin-bottom: 28rpx;
  }

  .process-layout {
    @include flexs(flex-start, flex-start);
    .process-left {
      @include wh(28rpx);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 7rpx;
      margin-right: 16rpx;

      .drop {
        @include wh(28rpx, 28rpx);
      }
      .line {
        @include wh(2rpx, 110rpx);
        background: #967e4f;
      }
    }

    .process-right {
      padding-bottom: 28rpx;

      .process-title {
        @include flexs(center, flex-start);
        @include fonts(28rpx, #967e4f);
        .label {
          @include fonts(22rpx, #ffffff);
          padding: 0rpx 8rpx;
          box-sizing: border-box;
          background: #222222;
          border-radius: 10rpx 10rpx 10rpx 0rpx;
          margin-left: 12rpx;
        }
      }
      text {
        @include fonts(24rpx, #939395);
      }
    }
  }

  .item-card {
    @include wh(100%);
    @include flexs(center, space-between);
    @include fonts(24rpx, #939395);
    padding: 12rpx 12rpx 12rpx 24rpx;
    box-sizing: border-box;
    background: linear-gradient(
      97deg,
      rgba(150, 126, 79, 0.24) 0%,
      rgba(150, 126, 79, 0) 100%
    );
    border-radius: 8rpx;
    text {
      @include wh(90%);
      @extend %text-overflow;
    }
    .right-img {
      @include wh(32rpx, 32rpx);
      image {
        @include wh(32rpx, 32rpx);
      }
    }
  }

  .title4 {
    @include flexs(center, space-between);
    .title4-left {
      @include flexs(center, flex-start);
      @include fonts(30rpx, #222222, bold);
      .portrait {
        @include wh(60rpx, 60rpx);
        margin-right: 20rpx;
        border-radius: 50%;
      }
    }
    image {
      @include wh(32rpx, 32rpx);
    }
  }

  .label-item-layout {
    @include flexs(center, flex-start);
    padding: 14rpx 0 38rpx 0;
    box-sizing: border-box;
    .label-item {
      @include flexs(center, flex-start);
      @include fonts(28rpx, #939395);

      text {
        @include fonts(28rpx, #222222, bold);
        margin-left: 10rpx;
      }
    }
    .label-item-line {
      @include wh(2rpx, 24rpx);
      background: #939395;
      margin: 0 20rpx;
    }
  }

  .title5 {
    @include flexs(center, space-between);
    @include fonts(28rpx, #222222, bold);

    .right {
      @include flexs(center, flex-end);
      @include fonts(24rpx, #939395);
      image {
        @include wh(20rpx, 20rpx);
        margin-left: 10rpx;
      }

      .but {
        @include fonts(28rpx, #ffffff);
        padding: 6rpx 20rpx;
        box-sizing: border-box;
        background: #19dff2;
        border-radius: 24rpx;
      }
    }
  }

  .describe-text {
    @include fonts(28rpx, #636569);
    padding-top: 10rpx;
    box-sizing: border-box;
  }
  .text-overflow-many {
    @include text-overflow-many(4);
    height: 180rpx;
  }

  .moer {
    @include wh(100%, 50rpx);
    @include flexs(center, center);
    padding: 16rpx 0 44rpx 0;
    box-sizing: border-box;
    image {
      @include wh(32rpx, 32rpx);
    }
  }

  .title5-margin {
    margin-top: 35rpx;
  }

  .goodsImgList-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 24rpx;
    .goodsImg-item {
      @include wh(212rpx, 212rpx);
      margin-bottom: 10rpx;
    }

    /* 如果最后一行是3个元素 */
    .goodsImg-item:last-child:nth-child(3n - 1) {
      margin-right: calc(32.5% + 3% / 3);
    }
    /* 如果最后一行是2个元素 */
    .goodsImg-item:last-child:nth-child(3n - 2) {
      margin-right: calc(65% + 6% / 3);
    }
  }

  .goods-item {
    @include flexs(center, space-between);
    padding: 40rpx 0 20px 0;
    box-sizing: border-box;
    .goods-item-img {
      @include wh(72rpx, 72rpx);
      @include flexs(center, center);
      background: #f5f5f5;
      border-radius: 8rpx;
      image {
        @include wh(56rpx, 56rpx);
      }
    }

    .goods-text {
      @include wh(calc(100% - 72rpx - 24rpx));
      @include fonts(30rpx, #222222, 400);
      @extend %text-overflow;
    }
  }

  .buy-item {
    @include flexs(center, space-between);
    @include fonts(28rpx, #222222);
    padding: 20rpx 0;
    box-sizing: border-box;
    .item {
      @include wh(20%);
      @include flexs(center, flex-start);
      padding-left: 5rpx;
      box-sizing: border-box;
      .portrait {
        @include wh(48rpx, 48rpx);
        border-radius: 50%;
        margin-right: 16rpx;
      }
    }
    .item:first-child {
      @include wh(30%);
      padding-left: 0rpx;
    }
    .item:last-child {
      @include fonts(28rpx, #939395);
    }
  }

  .buy-item:last-child {
    margin-bottom: 0;
  }

  .goods-card-layout {
    @include flexs(center, flex-start);

    .goods-card {
      @include wh(150rpx, 194rpx);
      padding: 16rpx 16rpx 0 16rpx;
      box-sizing: border-box;
      background: #f9f9f9;
      border-radius: 4rpx;
      margin-right: 20rpx;
      .goods-card-img {
        @include wh(118rpx, 118rpx);
        @include flexs(center, center);
        background: #ffffff;
        image {
          @include wh(118rpx, 118rpx);
        }
      }

      .goods-money {
        @include fonts(24rpx, #222222, bold);
        padding: 12rpx 0;
        box-sizing: border-box;
      }
    }
  }

  .problem-title {
    @include fonts(28rpx, #222222, bold);
    padding: 36rpx 0 20rpx 0;
  }
  .problem-text {
    @include fonts(24rpx, #666666);
  }
}

.no-padding {
  padding-top: 0;
  background-color: white;
  margin-top: 16rpx;
  width: 710rpx;
  margin: 16rpx auto 0 auto;
  padding: 30rpx 24rpx;
  box-sizing: border-box;
}

.card-item-layout {
  @include wh(710rpx, 108rpx);
  @include flexs(center, flex-start);
  margin: auto;
  background: #ffffff;
  padding: 16rpx 0;
  box-sizing: border-box;
  margin-bottom: 16rpx;
  position: relative;
	border-radius: 8rpx;
  overflow: hidden;
  .card-item {
    @include wh(33%, 108rpx);
    @include fonts(24rpx, #939395);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    // border-right: 1rpx solid #E4E4E4;
    .item-val {
      @include wh(180rpx);
      @include fonts(24rpx, #222222);
      @extend %text-overflow;
      margin-bottom: 5rpx;
      text-align: center;
    }

    .line {
      width: 2rpx;
      height: 40rpx;
      position: absolute;
      left: 0;
      top: 34rpx;
      background-color: #e4e4e4;
    }
  }
  .card-item:last-child {
    border-right: 0rpx solid #ffffff;
  }

  .right-item {
    @include wh(108rpx, 108rpx);
    @include flexs(center, center);
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(
      270deg,
      #ffffff 60%,
      rgba(255, 255, 255, 0.2) 100%
    );
    image {
      @include wh(20rpx, 20rpx);
      margin-left: 30rpx;
    }
  }
}

.bottom-layout {
  @include flexs(center, space-between);
  padding: 10rpx 24rpx 10rpx 0;
  padding-bottom: 10rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
  box-sizing: border-box;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;

  .bottom-left {
    @include flexs(center, flex-start);

    .bottom-item {
      @include wh(125rpx);
      @include fonts(26rpx, #222222);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      image {
        @include wh(40rpx, 40rpx);
        margin-bottom: 4rpx;
      }

      .button-share {
        @include wh(125rpx, 100rpx);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
    }
  }

  .bottom-but {
    @include wh(346rpx, 80rpx);
    @include flexs(center, space-between);
    @include fonts(30rpx, #ffffff, bold);
    padding: 0 24rpx;
    box-sizing: border-box;
    background: #19dff2;
    border-radius: 8rpx;
  }
  .bottom-but-no {
    background-color: #a1a1a1;
  }
}

.dialog-content {
  max-height: 60vh;
  padding: 24rpx;
  box-sizing: border-box;
  overflow-y: scroll;
  .coupon-card-layout:last-child {
    margin-bottom: 0rpx;
  }
  .coupon-card-layout {
    padding: 24rpx;
    box-sizing: border-box;
    background: #fdf0f3;
    border-radius: 20rpx;
    margin-bottom: 48rpx;
    .coupon-top {
      @include flexs(center, space-between);
      .left {
        @include flexs(center, flex-start);
        .money {
          @include fonts(48rpx, #ff2d52, bold);
          margin-right: 12rpx;
        }
        .coupon-name {
          @include wh(350rpx);
          @include fonts(32rpx, #ff2d52, bold);
          @extend %text-overflow;
        }
      }

      .but {
        @include wh(136rpx, 64rpx);
        @include flexs(center, center);
        @include fonts(28rpx, #ffffff);
        background: #ff2d52;
        border-radius: 46rpx;
      }

      .disable {
        background: #bfbfbf;
      }
    }

    .label {
      @include fonts(22rpx, #ff2d52, bold);
      display: inline;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 36rpx;
      margin-top: 12rpx;
    }
    .text {
      @include fonts(24rpx, #222222);
      margin-top: 12rpx;
    }
    .time {
      @include fonts(24rpx, #939395);
      margin-top: 20rpx;
    }
  }

  .item-card {
    @include flexs(center, space-between);
    padding: 12rpx 12rpx 12rpx 24rpx;
    box-sizing: border-box;
    background: #f4f2ed;
    border-radius: 8rpx;
    margin-bottom: 16rpx;
    .left {
      @include flexs(center, flex-start);
      .fineness {
        @include fonts(40rpx, #967e4f, bold);
      }
      .line {
        @include wh(2rpx, 28rpx);
        background: #967e4f;
        margin: 0 24rpx;
      }
      .description {
        @include wh(150rpx);
        @include fonts(28rpx, #222222, bold);
        @extend %text-overflow;
      }
    }
    .right {
      @include wh(330rpx);
      @include fonts(24rpx, #939395);
    }
  }

  .tips-text {
    @include fonts(28rpx, #939395);
    margin-top: 48rpx;
  }

  .block-item {
    @include flexs(center, flex-start);
    margin-bottom: 40rpx;
    .title {
      @include wh(180rpx);
      @include fonts(28rpx, #636569);
    }
    .content {
      @include wh(calc(100% - 180rpx));
      @include fonts(28rpx, #222222, bold);
    }
  }
  .block-item:last-child {
    margin-bottom: 0rpx;
  }

  .text-item:last-child {
    margin-bottom: 0rpx;
  }
  .text-item {
    margin-bottom: 64rpx;
    .title {
      @include fonts(28rpx, #222222, bold);
      margin-bottom: 12rpx;
    }
    .content {
      @include fonts(24rpx, #939395);
    }
  }

  .share-layout {
    @include flexs(center, space-between);

    .share-item {
      @include wh(50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      .icon {
        @include wh(84rpx, 84rpx);
        @include flexs(center, center);
        background: #f5f5f5;
        border-radius: 50%;
        image {
          @include wh(48rpx, 48rpx);
        }
      }
      .share-name {
        @include fonts(28rpx, #222222);
        margin-top: 16rpx;
      }
    }
  }
}

.dialog-content{
	width: 100%;
	padding: 0 32rpx 32rpx 32rpx;
	box-sizing: border-box;
	.tips-text{
			@include fonts(28rpx,#939395);
			margin-top: 48rpx;
	}

	.block-item{
		@include flexs(center,flex-start);
		margin-bottom: 40rpx;
		.title{
			@include wh(180rpx);
			@include fonts(28rpx,#636569);
		}
		.content{
			@include wh(calc(100% - 180rpx));
			@include fonts(28rpx,#222222,bold);
		}
	}
	.block-item:last-child{
			margin-bottom: 0rpx;
	}


}
</style>